<template>
  <div>
    <div class="main w">
      <div class="right1">
        <div class="rightTop">
          <span>当前单位 :</span>
          <span class="depName">{{findEmployee.departmentName}}</span>
        </div>
        <div class="personList">
          <ul>
            <li v-for="employeeItem in employeeList" :key="employeeItem.id">
              <router-link :to="'/person/'+employeeItem.eid+'/'+employeeItem.departmentId">
                <div class="photo">
                  <img :src="imgSrc + employeeItem.eid" alt="" :onerror="headPortrait">
                </div>
                <p>姓名:
                  <span class="rateName">{{employeeItem.name}}</span>
                </p>
                <p>职责:
                  <el-popover
                    placement="top-start"
                    title="职责"
                    width="150"
                    trigger="hover"
                    :content="employeeItem.role"
                  >
                    <span slot="reference" class="duty">{{employeeItem.role}}</span>
                  </el-popover>
                </p>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bus from "../../components/common";
import api from "../../util/api.js";
export default {
  name: "vestin",
  data() {
    return {
      findEmployee: [],
      employeeList: [],
      vestinId:'',
      headPortrait: 'this.src="' + require("../../assets/def1.png") + '"', //头像加载不出来的话显示
      imgSrc: api.findImage, //头像的地址
    };
  },
  watch: {
    $route: function(newValue, oldValue) {
      this.getDepManList();
    }
  },
  created() {
    this.getDepManList();
    this.personList();// 默认加载部门列表的第一个部门
   
  },
  methods: {
    // 默认加载部门列表的第一个id
    personList() {
      bus.$on("depFirstId", firstId => {
        // 这里的firstId就是从departenList.vue中传来的数据
        // console.log("000", firstId);
        const url = `api/employee/findEmployeeByDepartmentId?departmentId=${firstId}`;
        // 获取部门人员 传入id
        this.axios.post(url).then(response => {
          if (response.data.data.employeeList != null) {
            this.findEmployee = response.data.data; //当前部门
            this.employeeList = response.data.data.employeeList; //获取人员列表
          }
        });
      });
    },
    //改变id值获取部门人员列表
    getDepManList() {
      this.vestinId = this.$route.params.vestinId;
      // console.log("23", this.vestinId);
      const url = `api/employee/findEmployeeByDepartmentId?departmentId=${this.vestinId}`;
      this.axios.post(url).then(response => {
        if (response.data.data != null) {
          this.findEmployee = response.data.data; //当前部门数据
          this.employeeList = response.data.data.employeeList; //获取人员列表
          //   console.log("人员列表", this.employeeList);
        }
      });
    },
    
  }
};
</script>

